import { defineStore } from 'pinia'
import { ref } from 'vue'

export interface ThemeConfig {
  primaryColor: string
  layout: 'vertical' | 'horizontal'
  theme: 'light' | 'dark'
  sidebarColor: string
  menuTextColor: string
  menuActiveTextColor: string
  menuActiveBgColor: string
  fontSize: number
}

export const defaultTheme: ThemeConfig = {
  primaryColor: '#409EFF',
  layout: 'vertical',
  theme: 'light',
  sidebarColor: '#304156',
  menuTextColor: '#bfcbd9',
  menuActiveTextColor: '#409EFF',
  menuActiveBgColor: 'rgba(64, 158, 255, 0.1)',
  fontSize: 14
}

const THEME_KEY = 'theme_config'

export const useThemeStore = defineStore('theme', () => {
  // 从 localStorage 读取保存的主题配置
  const savedConfig = localStorage.getItem(THEME_KEY)
  const initialConfig = savedConfig ? JSON.parse(savedConfig) : defaultTheme
  
  const config = ref<ThemeConfig>(initialConfig)

  // 应用主题
  const applyTheme = () => {
    const style = document.documentElement.style
    const body = document.body
    const html = document.documentElement

    // 设置主题色
    style.setProperty('--el-color-primary', config.value.primaryColor)
    
    // 设置字体大小
    body.style.fontSize = `${config.value.fontSize}px`
    
    // 设置主题模式
    if (config.value.theme === 'dark') {
      html.classList.add('dark')
      // 深色模式下的颜色
      style.setProperty('--sidebar-bg-color', '#1d1e1f')
      style.setProperty('--menu-text-color', '#8b8c8d')
      style.setProperty('--menu-active-text-color', config.value.primaryColor)
      style.setProperty('--menu-active-bg-color', `color-mix(in srgb, ${config.value.primaryColor} 15%, transparent)`)
      style.setProperty('--menu-hover-bg-color', 'rgba(255, 255, 255, 0.08)')
      style.setProperty('--menu-sub-bg-color', '#18191a')
      style.setProperty('--navbar-bg-color', '#1d1e1f')
      style.setProperty('--main-bg-color', '#141516')
      style.setProperty('--el-border-color', '#2b2b2c')
      style.setProperty('--el-border-color-light', '#2b2b2c')
      style.setProperty('--el-text-color-primary', '#e5eaf3')
      style.setProperty('--el-text-color-regular', '#cfd3dc')
      style.setProperty('--el-text-color-secondary', '#a3a6ad')
      style.setProperty('--el-bg-color', '#1d1e1f')
      style.setProperty('--el-bg-color-overlay', '#1d1e1f')
      style.setProperty('--el-fill-color-light', '#262727')
      style.setProperty('--el-fill-color-blank', '#1d1e1f')
    } else {
      html.classList.remove('dark')
      // 浅色模式下的颜色
      style.setProperty('--sidebar-bg-color', config.value.sidebarColor)
      style.setProperty('--menu-text-color', config.value.menuTextColor)
      style.setProperty('--menu-active-text-color', config.value.menuActiveTextColor)
      style.setProperty('--menu-active-bg-color', config.value.menuActiveBgColor)
      style.setProperty('--menu-hover-bg-color', 'rgba(0, 0, 0, 0.06)')
      style.setProperty('--menu-sub-bg-color', 'rgba(0, 0, 0, 0.02)')
      style.setProperty('--navbar-bg-color', '#ffffff')
      style.setProperty('--main-bg-color', '#f5f7fa')
      style.setProperty('--el-border-color', '#dcdfe6')
      style.setProperty('--el-border-color-light', '#e4e7ed')
      style.setProperty('--el-text-color-primary', '#303133')
      style.setProperty('--el-text-color-regular', '#606266')
      style.setProperty('--el-text-color-secondary', '#909399')
      style.setProperty('--el-bg-color', '#ffffff')
      style.setProperty('--el-bg-color-overlay', '#ffffff')
      style.setProperty('--el-fill-color-light', '#f5f7fa')
      style.setProperty('--el-fill-color-blank', '#ffffff')
    }

    // 保存到 localStorage
    localStorage.setItem(THEME_KEY, JSON.stringify(config.value))
  }

  // 更新主题配置
  const updateConfig = (newConfig: Partial<ThemeConfig>) => {
    config.value = { ...config.value, ...newConfig }
    applyTheme()
  }

  // 重置主题
  const resetTheme = () => {
    config.value = { ...defaultTheme }
    applyTheme()
  }

  return {
    config,
    updateConfig,
    resetTheme,
    applyTheme
  }
}) 